<template>
  <v-touch
    v-on:swipeleft="swiperleft"
    v-on:swiperight="swiperright"
    class="wrapper"
  >
    <div>
      <div class="Abox1" v-show="$route.meta.test == true">
        <!-- v-show="$route.path=='/home'&&$route.path=='/about'&&$route.path=='/center'&&$route.path=='/myCenter'" -->
        <ul @click="change(i)" v-for="(item, i) in routes" :key="item.path">
          <i
            :class="activeClass == i ? `bg1 ${item.icon1}` : ` ${item.icon}`"
          ></i>
          <li>
            <router-link
              :class="activeClass == i ? 'bg2' : ''"
              :to="item.path"
              >{{ item.meta.til }}</router-link
            >
          </li>
        </ul>
      </div>
      <router-view></router-view>
      {{ list }}
    </div>
  </v-touch>
</template>

<script>
import routes from "./router/index";
export default {
  data() {
    return {
      activeClass: 0,
    };
  },
  created() {
    if (window.localStorage.getItem("activeClass") != 0) {
      this.activeClass = window.localStorage.getItem("activeClass");
    } else {
      this.activeClass = 0;
    }
  },
  computed: {
    routes() {
      // console.log(this.routes, "route计算属性");
    },
    list() {
      if (this.$route.path === "/home") {
        this.activeClass = 0;
        // console.log(this.activeClass,'计算属性');
      }
      
    },
    routes() {
      return routes.options.routes.filter((item) => item.hidden !== true);
    },
    routes2() {
      return routes.options.routes;
    },
  },
  methods: {
    swiperleft: function () {
      if (
        this.$route.path !== "/" &&
        this.$route.path !== "/about" &&
        this.$route.path !== "/center" &&
        this.$route.path !== "/message" &&
        this.$route.path !== "/register1" &&
        this.$route.path !== "/home" &&
        this.$route.path !== "/myCenter"
      ) {
        // console.log("右滑");
      } else {
        // console.log("底部定位");
      }
    },
    swiperright: function () {
      if (
        this.$route.path !== "/" &&
        this.$route.path !== "/about" &&
        this.$route.path !== "/center" &&
        this.$route.path !== "/home" &&
        this.$route.path !== "/myCenter"
      ) {
        // console.log("左滑");
        this.$router.go(-1);
      } else {
        // console.log("底部定位");
      }
    },
    change(i) {
      this.activeClass = i;
      // console.log("change", i);
      window.localStorage.setItem("activeClass", i);
    },
  },
};
</script>

<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
* {
  margin: 0;
  padding: 0;
  /* font-size: 24px; */
}
li {
  list-style: none;
}
ul {
  padding-inline-start: 0;
}
a {
  text-decoration: none;
}
</style>
<style scoped lang="scss">
.Abox1 {
  z-index: 2;
  width: 100%;
  position: fixed;
  bottom: 0;
  display: flex;
  padding-top: 1vh;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  background: rgb(245, 245, 245);
  box-shadow: -0.1vh -0.1vh 0.2vh 1vh rgba(255, 255, 255, 0.1);
  border-top: 0.3vh solid #eee;
  > ul {
    width: 20vw;
    > i {
      margin-top: 1vh;
      font-size: 6.8vw;
    }
    .bg1 {
      color: rgb(255, 109, 83);
    }
    > li {
      margin-bottom: 1.2vh;
      > a {
        font-size: 4vw;
        color: #666;
      }
      .bg2 {
        color: rgb(255, 109, 83);
      }
    }
  }
}
.wrapper {
  touch-action: pan-y !important;
}
</style>
